<template>
  <el-container>
      <el-header>
        <h3>管理员账号列表</h3>
      </el-header>
      <el-main>
        <el-table
        :data="tableData"
        border
        v-loading="loading"
        >
          <el-table-column
            label="图像"
          >
            <template slot-scope="scope">
              <el-avatar shape="circle" :size="60" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-table-column>

          <el-table-column
            label="管理员昵称"
            prop="name"
          >
          </el-table-column>
          <el-table-column
            label="管理员账号"
            prop="username"
          ></el-table-column>
          <el-table-column
            label="管理员权限"
          >
            <template slot-scope="scope">
              <el-switch v-model="scope.row.auth" @change="changeValue(scope.$index)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="管理分校"
            prop="school_name"
          ></el-table-column>
          <el-table-column
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="small" @click.prevent="edit(scope.$index)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
          <el-button type="primary" size="big" @click="add">添加管理员</el-button>
      </el-footer>
  </el-container>
</template>

<script>
  import {getManagerList, updateAdminAuth} from '@/api/manager'
    export default {
        name: "list",
        data () {
            return {
                tableData: [],
                loading: true,
            };
        },
        methods: {
            edit(index) {
              this.$router.push({path:'/manager/info',query:{admin_id: this.tableData[index].id}});
            },
            add () {
                this.$router.push({path: '/manager/add'});
            },
            changeValue(index) {
                this.loading = true;
                var data = {
                    manager_id: this.tableData[index].id,
                    status: this.tableData[index].auth === true ? 1 : 2,
                };
                updateAdminAuth(data).then(response => {
                    this.$message.success(response.msg);
                    this.loading = false;
                }).catch( err => {
                    this.loading = false;
                })
            }
        },
        mounted() {
            getManagerList().then(response => {
                this.tableData = response.data;
                this.loading = false;
            });
        }
    }
</script>

<style scoped>
    .el-container{
      width:80%;
      max-width: 100%;
      overflow: hidden;
      border: 1px solid #F2F6FC;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      margin: 10px auto;
    }

    .el-header {
      text-align: center;
    }

    .el-header h3 {
      font-size: 20px;
      height: 20px;
      line-height: 20px;
    }

    .el-footer {
      text-align: center;
    }

</style>
